<template>
  <div class="bg">
    <div class="login-wrap animated fadeIn">
      <h3>Auto Vue</h3>
      <p>{{$t('m.login.introduction')}}</p>
      <el-form ref="form" :model="form" :rules="rules" label-width="0px">

        <el-form-item prop="email" v-show="reg_show">
          <el-input :placeholder="$t('m.login.email')" v-model="form.email" clearable></el-input>
        </el-form-item>

        <el-form-item prop="name">
          <el-input :placeholder="$t('m.login.name_holder')" v-model="form.name" clearable></el-input>
        </el-form-item>

        <el-form-item prop="password">
          <el-input :placeholder="$t('m.login.password_holder')" v-model="form.password" type="password"
                    clearable></el-input>
        </el-form-item>


        <el-form-item>
          <el-input placeholder="请输入验证码" v-model="form.code" type="text" clearable v-show="reg_show"></el-input>

          <el-image v-show="reg_show" :src="mycode" @click="mycode_button"></el-image>
        </el-form-item>

        <el-form-item>
          <el-row type="flex" justify="space-between">
            <el-checkbox v-model="isMemery" style="color:#eee">{{$t('m.login.remember')}}</el-checkbox>
            <a href @click.prevent="openMsg" style="color:#eee">{{$t('m.login.forget')}}</a>
            <a href @click.prevent="qiehuan" style="color:#eee">{{qiehuan_button}}</a>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login_admin()" v-show="log_show">{{$t('m.login.button')}}</el-button>
          <el-button @click="register_admin()" v-show="reg_show">注册</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 粒子漂浮物 -->
    <vue-particles color="#fff" :particleOpacity="0.7" :particlesNumber="30" shapeType="star" :particleSize="5"
                   linesColor="#fff" :linesWidth="2" :lineLinked="true" :lineOpacity="0.4" :linesDistance="150"
                   :moveSpeed="3" :hoverEffect="true" hoverMode="grab" :clickEffect="true"
                   clickMode="push"></vue-particles>
  </div>
</template>
<script>
  // 引入粒子特效插件并注册
  import Vue from "vue";
  import router from "../router/index";
  import generateRoutes from "../router/parse";
  import VueParticles from "vue-particles";
  import {login_admin, register_admin} from '../api/http'

  Vue.use(VueParticles);

  export default {
    name: "signin",
    data() {
      // var checkone = (rule, value, callback) => {
      //   let regphone = /(^0{0,1}1[3|4|5|6|7|8|9][0-9]{9}$)/;
      //   let regmail = /^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.){1,4}[a-z]{2,3}$/;
      //   if (value === "") {
      //     callback(new Error("请输入手机号/邮箱"));
      //   } else {
      //     if (!isNaN(value)) {dfa
      //       if (!regphone.test(value)) {
      //         callback(new Error("请输入正确手机号"));
      //         return false;
      //       }
      //       callback();
      //     }
      //     if (value.indexOf("@") != -1) {
      //       if (!regmail.test(value)) {
      //         callback(new Error("请输入正确邮箱"));
      //         return false;
      //       }
      //       callback();
      //     }
      //     callback(new Error("请输入正确手机/邮箱"));
      //   }
      // };
      return {
        form: {
          name: '',
          password: '',
          email: '',
          code: ''
        },
        isMemery: false,
        log_show: true,
        reg_show: false,
        mycode: 'http://localhost:8000/user_app/mycode/',
        qiehuan_button: '注册',
        rules: {
          name: [
            {
              required: true,
              message: this.$t("m.login.name_tip"),
              trigger: "blur"
              // validator: checkone
            }
          ],
          password: [
            {
              required: true,
              message: this.$t("m.login.password_tip"),
              trigger: "blur"
            }
          ]
        }
      };
    },
    methods: {
      // 切换验证码
      mycode_button:function(){
        var num = Math.random();
        this.mycode = 'http://localhost:8000/user_app/mycode/?code=' + num
      },
      //注册功能
      register_admin: function () {
        var data = {
          'username': this.form.name,
          'password': this.form.password,
          'code': this.form.code,
          'email': this.form.email,
          'super_id': '1'
        };
        console.log('注册');
        register_admin(data).then(res => {
          alert(res.message)
        })
      },
      // 切换按钮
      qiehuan: function () {
        if (this.reg_show == false) {
          this.reg_show = true;
          this.log_show = false;
          this.qiehuan_button = '登陆'
        } else {
          this.reg_show = false;
          this.log_show = true;
          this.qiehuan_button = '注册'
        }
      },
      login_admin: function () {
        var data = {'username': this.form.name, 'password': this.form.password}
        login_admin(data).then(res => {
          if (res.code == 200) {
            localStorage.userName = res.username;
            localStorage.userId = res.uid;
            this.getMenu();
          }else {
            alert('用户或者密码错误')
          }
        })
      },
      getMenu() {
        this.$http.get("getMenu").then(res => {
          // 提取菜单数组，交给本地存储
          console.log(res)
          let menu = res.data.menu;
          // 将原始数据进行本地存储
          localStorage.menu = JSON.stringify(menu);
          // 解析出路由配置表
          const _routes = generateRoutes(menu);
          // 动态加载路由配置表
          router.addRoutes(_routes);
          // 跳转到首页
          this.$router.push("/notes");
        });
      },
      openMsg() {
        // 注意这里使用了国际化
        this.$message.warning(this.$t("m.login.info"));
      }
    },
    watch: {
      isMemery(n, o) {
        if (n) {
          localStorage.userInfo = this.form.name;
          localStorage.passwordInfo = this.form.password;
        } else {
          localStorage.removeItem("username");
          localStorage.removeItem("uid");
        }
      }
    }
  };
</script>
<style scoped lang="scss">
  .bg {
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("../../static/img/bg.jpg");
    background-position: -20% 10%;
    background-size: contain;

    #particles-js {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }
  }

  .login-wrap {
    width: 310px;
    padding: 30px;
    z-index: 3;
    margin-right: -40%;
    position: relative;
    background: rgba(50, 50, 50, 0.5);

    .el-form-item {
      margin-bottom: 25px !important;
    }

    h3 {
      text-align: center;
      color: #ebedef;
      margin-top: 0px;
      margin-bottom: 5px;
      font-size: 22px;

      span {
        color: #20a0ff;
      }
    }

    p {
      text-align: center;
      color: #fff;
      margin: 0;
    }

    form {
      margin-top: 25px;

      .el-form-item {
        margin-bottom: 15px;
      }

    }

    a {
      text-decoration: none;
      color: #1f2d3d;
    }

    button {
      width: 100%;
      font-weight: 600;
      border: none;
      border-radius: 0;
      background-color: #34495e;
    }
  }
</style>
